<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>04_认识一下VueComponent</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="demo"></div>
    </body>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        
        // 创建一个Student组件
        const Student = {
            name:'Student',
            template:`
                <div>
                    <h2>学生姓名：{{name}}</h2>	
					<h2>学生年龄：{{age}}</h2>	
					<button @click="showMore">点我展示更多信息</button>
                </div>
            `,
            data(){
                return{
                    name:'张三',
					age:18,
					gender:'男',
					subject:'前端'
                }
            },
            methods: {
                showMore(){
                    console.log('****',this);//Vue.component
                    alert(`性别：${this.gender}，所学技术：${this.subject}`)

                }
            },
        }
        //定义一个App组件
		const App = {
			name:'App',
			components:{Student},
			template:`
				<div>
					<h2>........</h2>	
					<Student/>
					<h2>........</h2>	
				</div>
			`,
			data(){
				return {b:2}
			},
			methods:{
				test2(){
					console.log('......')
				}
			}
		}
	
		//创建vm
		const vm = new Vue({
			el:'#demo',
			components:{App},
			template:'<App/>',
			data(){
				// console.log('new Vue里的this',this) //vm
				return {a:1}
			},
			methods:{
				test(){
					// console.log('new Vue里的methods中的this',this) //vm
					console.log('@')
				}
			}
		})
    </script>
</html>